<template>
  <div class="app-container">
    <header>
      <div class="add">新增配置</div>
      <el-form inline class="demo-form-inline" size="small" label-width="140px">
        <el-form-item label="城市名称" label-width="70px">
          <el-select v-model="addParams.cityCode" clearable>
            <el-option :label="c.areaName" :value="c.areaCode" v-for="(c, index) in cityArr" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="类型名称">
          <el-select v-model="addParams.typeName">
            <el-option label="联系地址" value="联系地址" />
            <el-option label="体检医院" value="体检医院" />
          </el-select>
        </el-form-item>
        <el-form-item label="编码" :required="true">
          <el-input placeholder="" v-model="addParams.code" />
        </el-form-item>
        <el-form-item label="字面值" :required="true">
          <el-input placeholder="" v-model="addParams.value" />
        </el-form-item>
        <el-form-item label=" " label-width="30px">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="add">新增配置</el-button>
          <!-- <el-button type="primary" icon="el-icon-search" size="small">查询</el-button> -->
        </el-form-item>
      </el-form>
    </header>
    <main>
      <div style="height: 630px;">
        <el-table :data="tableData" border stripe height="100%">
          <el-table-column prop="id" label="ID" width="65" align="center" />
          <el-table-column prop="city" label="城市名称" width="180" align="center" />
          <el-table-column prop="ord" label="行号" align="center" width="100" />
          <el-table-column prop="type" label="类型" align="center" width="180" />
          <el-table-column prop="typeName" label="类型名称" align="center" width="180" />
          <el-table-column prop="code" label="编码" align="center" width="150" />
          <el-table-column prop="value" label="字面值" align="center" width="150" />
          <el-table-column label="默认值" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isDefault" :disabled="true"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="editer" label="新增人" width="120" align="center" />
          <el-table-column prop="edittime" label="新增时间" width="190" sortable align="center" />
          <el-table-column fixed="right" label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" plain class="el-icon-delete"
                @click="deleteRow(scope.row)">删除</el-button>
              <el-button type="warning" size="mini" plain class="el-icon-edit"
                @click="editRow(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main>
    <!-- 分页 -->
    <footer class="pagin">
      <el-pagination background :current-page="params.page" :page-sizes="[20, 50, 100, 150]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :page-size="params.pageSize" />
    </footer>

    <!-- 编辑 弹窗 -->
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false" :before-close="handleClose">
      <el-form inline class="demo-form-inline" size="small" label-width="70px">
          <el-form-item label="编码">
            <el-input placeholder="请输入新的编码" v-model="editRowData.code" />
          </el-form-item>
          <el-form-item label="字面值" label-width="120px">
            <el-input placeholder="请输入新的字面值" v-model="editRowData.value" />
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { adminAPI } from '@/api/adminstare'

/**
* @author        Yng
* @time          2023-10-30 09:23:16  星期一
* @description   区域配置
**/

export default {
  data() {
    return {
      tableData: [],
      params: {
        action: 'areaConfigList',
        page: 1,
        pageSize: 20,
      },
      addParams: {
        cityCode: '',//区域代码，示例：GDHZ
        type: '',//类型：AreaContact:联系地址/Hospital:体检医院，二选一
        typeName: '',//类型名称：联系地址/体检医院，二选一
        code: '',//编码，字符串即可，非空
        value: '',//字面值
      },
      total: 0,
      cityArr: [],//城市列表
      dialogVisible: false,
      editRowData: {//存储当前行的数据用于编辑
        id:'',
        code: '',
        value: '',
      }
    }
  },
  async mounted() {
    // 获取城市列表
    this.cityArr = this.$store.state.commonData.cityArr

    if (!this.cityArr) {
      const result = await this.$store.dispatch('commonData/getCityList')
      this.cityArr = result
    }

    this.getRegion()
  },
  methods: {
    // 编辑当前行数据
    editRow(row) {
      this.editRowData.action= 'areaConfigModify',
      this.editRowData.code=row.code
      this.editRowData.value = row.value
      this.editRowData.id = row.id
      this.dialogVisible=true
    },
    // 保存编辑
    save() { 
      adminAPI(this.editRowData).then(res => {
        if (res.code == 0) { 
          this.$message({
            type: 'success',
            message: '修改成功'
          });
          this.dialogVisible = false
          this.getRegion()
        }
      })
    },
    deleteRow(row) { 
      const data = { action: 'areaConfigDelete', id: row.id }
      this.$confirm('此操作将永久配置, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adminAPI(data).then(res => {
          this.getRegion()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      })
    },
    // 关闭编辑弹窗
    handleClose() { 
      // 将弹窗里面的内容清空
      for (const key in this.editRowData) {
        this.editRowData[key] = ''
      }
    },

    // 新增
    add() {
      this.addParams.action='areaConfigAdd',
      this.addParams.typeName == '联系地址' ? this.addParams.type = 'AreaContact' : this.addParams.type = 'Hospital'

      if (this.addParams.code == '' || this.addParams.value == '') { 
        this.$message({
          message: '请输入编码/字面值 信息填写完整',
          type: 'error'
        });
        return
      }

      adminAPI(this.addParams).then(res => {
        if (res.code == 0) {
          this.$message({
            type: 'success',
            message: res.data
          });
          // 将输入框的内容清空
          for (const key in this.addParams) {
            this.addParams[key] = ''
          }
          this.getRegion()
        }
      })

    },
    // 在线用户数据
    async getRegion() {
      let { code, data, total } = await adminAPI(this.params)
      if (!code) {
        this.tableData = data
        this.total = total
      }
    },
    // 一页几条数据
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getRegion();
    },
    // 当前页
    handleCurrentChange(val) {
      this.params.page = val
      this.getRegion();
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;


  main {
    &>div {
      height: 670px;
    }
  }
}

header {
  border: 1px solid #ebebeb;
  margin-bottom: 20px;
  padding-top: 20px;
  padding-bottom: 10px;
  padding-left: 10px;
  position: relative;
  margin-top: 10px;
  border-radius: 5px;

  .add {
    margin: 0;
    padding: 0;
    color: #606266;
    font-weight: bold;
    position: absolute;
    top: -10px;
    background-color: white;
  }
}</style>
